import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';

export default class filePage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 头部标题
      filePageTitle: "聊天中的文件",
      selectTheHook: require("../../../../assets/images/iconResources/selectTheHook.png"),
      defaultSelected: require('../../../../assets/images/iconResources/defaultSelectedState.png'),
      // 文件数据列表
      fileUserDatas: [
        {
          // 文件Icon
          fileIcon: require("../../../../assets/images/iconResources/wordIcon.png"),
          // 文件名称
          title: "俊码星球产品需求文档",
          // 文件描述内容
          meesage: "来自俊码星球产品研发群",
          // 文件时间
          tiem: "02-16",
          // 多选框选中状态
          selectedStatus: true
        },
        {
          fileIcon: require("../../../../assets/images/iconResources/wordIcon.png"),
          title: "俊码星球产品需求文档",
          meesage: "来自俊码星球产品研发群",
          tiem: "02-16",
          selectedStatus: false
        },
        {
          fileIcon: require("../../../../assets/images/iconResources/wordIcon.png"),
          title: "俊码星球产品需求文档",
          meesage: "来自俊码星球产品研发群",
          tiem: "02-16",
          selectedStatus: false
        },
        {
          fileIcon: require("../../../../assets/images/iconResources/wordIcon.png"),
          title: "俊码星球产品需求文档",
          meesage: "来自俊码星球产品研发群",
          tiem: "02-16",
          selectedStatus: true
        },
        {
          fileIcon: require("../../../../assets/images/iconResources/wordIcon.png"),
          title: "俊码星球产品需求文档",
          meesage: "来自俊码星球产品研发群",
          tiem: "02-16",
          selectedStatus: true
        },
        {
          fileIcon: require("../../../../assets/images/iconResources/wordIcon.png"),
          title: "俊码星球产品需求文档",
          meesage: "来自俊码星球产品研发群",
          tiem: "02-16",
          selectedStatus: false
        },
        {
          fileIcon: require("../../../../assets/images/iconResources/wordIcon.png"),
          title: "俊码星球产品需求文档",
          meesage: "来自俊码星球产品研发群",
          tiem: "02-16",
          selectedStatus: false
        },
      ],
    };
  }

  componentDidMount = () => { }

  // 修改选中状态
  checkCheck = (item) => {
    const selectedStatus = item.selectedStatus = !item.selectedStatus
    this.setState({
      selectedStatus: selectedStatus
    })
  }

  render() {
    const {
      filePageTitle,
      fileUserDatas,
      selectTheHook,
      defaultSelected
    } = this.state
    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={filePageTitle}
          leftText={"取消"}
          right={"确定"}
          titleColor={"#333"}
          pressRight={() => {
          }}
        />
        {/* 搜索功能 */}
        <TextInput
          placeholder='搜索文件'
          style={styles.inputstyle}
        />
        {/* 文件列表 */}
        <ScrollView>
          <View style={styles.padlr}>
            {fileUserDatas.map((item, index) => (
              <TouchableOpacity key={index}
                onPress={() => {
                  this.checkCheck(item, index)
                }}>
                <View style={styles.itemFile}
                  key={index}>
                  {item.selectedStatus ?
                    <View style={styles.selectCheckboxLeft}>
                      <Image
                        source={selectTheHook}
                      />
                    </View> :
                    <View style={styles.checkboxLeftDefurt}>
                      <Image
                        style={styles.imgItem}
                        source={defaultSelected}
                      />
                    </View>
                  }
                  <Image style={styles.SystemPromptLeft}
                    source={item.fileIcon} />
                  <View style={styles.IntermediateContent}>
                    <Text style={styles.title}>
                      {item.title}
                    </Text>
                    <View style={styles.bottom}>
                      <Text style={styles.news}>
                        {item.meesage}
                      </Text>
                      <Text style={styles.tiem}>
                        {item.tiem}
                      </Text>
                    </View>
                  </View>
                </View>
              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  padlrWarper: {
    flex: 1,
    backgroundColor: "#fff"
  },
  padlr: {
    flex: 1,
    backgroundColor: "#fff",
  },
  inputstyle: {
    height: 40,
    backgroundColor: "rgba(196, 196, 196, 0.25)",
    borderRadius: 5,
    textAlign: "center",
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 10
  },
  itemFile: {
    marginTop: 10,
    width: "100%",
    height: 80,
    paddingLeft: 15,
    paddingRight: 15,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    borderBottomWidth: 1,
    borderBottomColor: "rgb(240,240,240)"
  },
  selectCheckboxLeft: {
    width: 25,
    height: 25,
    borderBottomColor: "#f1f1f1",
    backgroundColor: "#1890FF",
    borderRadius: 15,
    lineHeight: 20,
    justifyContent: "center",
    alignItems: "center"
  },
  selectTheHook: {
    width: 10,
    height: 10
  },
  imgItem: {
    width: 25,
    height: 25
  },

  IntermediateContent: {
    width: "66%",
    flexDirection: "column",
    justifyContent: "space-between"
  },
  title: {
    fontSize: 16,
    marginBottom: 15
  },
  news: {
    fontSize: 13,
    color: "#757575"
  },
  tiem: {
    fontSize: 13,
    color: "#757575"
  },
  bottom: {
    flexDirection: "row",
    justifyContent: "space-between"
  },
  SystemPromptLeft: {
    width: 40,
    height: 40,
    marginRight: 20
  },
})